<template>
  <div class="container">
    <h5>子组件</h5>
    <h5>子传父</h5>
    <p>{{money}}</p>
   <button @click="changeMoney">花50元</button>
  </div>
</template>
<script>
import { watch } from 'vue'
export default {
  name: 'Son',
  // 子组件接收父组件数据使用props即可
  props: {
    money: {
      type: Number,
      default: 0
    }
  },
  // 🔔 setup 钩子函数只执行一次
  //      第一个参数是          props
  //      第二个参数可以解构出   { emit 事件触发器 , attrs 属性, slots 插槽}
  setup (props, {emit}) {
    // 🔔 watch 监听数据，数据变化时就会触发内部代码
    watch(
      () => props.money,
      () => {
        console.log(props.money)
      },
      { immediate: true },
    )
 // 子传父
   const changeMoney = () => {
    // 💥 注意：props 不可直接修改，可以把计算结果存到临时变量中
    const temp = props.money - 50
     // 父组件可以通过自定义事件 change-money 获取到结果
      emit('change-money', temp)
    }
    return { changeMoney }
  }
}
</script>